<template>
	<view :class="[primarySize()]">
		<view class="page-foot bg-white">
			<view class="pl20 pr30 ptb20 flex-box">
				<view class="footer_img1" @click="bindToggleFav">
					<image :src="iconPath(isFav?'fav_sc.png':'fav.png')"></image>
					<view class="text">{{isFav?'已':''}}收藏</view>
				</view>
				<button @click="shareTip" hover-class="none" class="footer_img1">
					<image src="https://admin.mosizp.cn/static/public/share.png"></image>
					<view class="text">分享</view>
				</button>
				<view class="footer_img1 u1" @click="contact">
					<image src="https://admin.mosizp.cn/static/public/chat.png"></image>
					<view class="text">沟通</view>
				</view>
				<view class="flex-grow-1"></view>
				<view class="bt1 ml30" @click="bindMakeCall">拨打电话</view>
				<button hover-class="none" class="bt2 ml20" :disabled="isInterviewing"
					@click="bindCreateInterview">{{isInterviewing?'已邀请':'邀请面试'}}</button>
			</view>
		</view>
		<view class="container bg-white">
			<view class="bg"></view>
			<view class="pr z2 ptb30 plr30">
				<image :src="cdnurl(resume.personal.avatar)" mode="aspectFill" class="user_img"></image>
				<view class="mt10 fwb fs34 colf lh48 tc">{{resume.personal.realname}} | {{resume.personal.gender_text}}
					| {{resume.personal.age}}岁</view>
				<view class="tc pt10">
					<view class="label" v-if="resume.personal.education_level.name">
						{{resume.personal.education_level.name}}
					</view>
					<view class="label" v-if="resume.personal.work_experience.name">
						{{resume.personal.work_experience.name}}
					</view>
					<!-- <view class="label">三年工作经验</view> -->
				</view>
				<view class="tal_info">
					<image src="https://admin.mosizp.cn/static/public/tip6.png" mode="aspectFill" class="tip_img"></image>
					<view class="view p30" v-for="(item,index) in resume.job_intention">
						<view class="m-ellipsis fs34 col3 fwb">
							[{{item.fav_city.shortname}}]{{item.fav_category.category_name}}</view>
						<view class="fs24 col3 lh32 mt10">
							<view class="col8 fs28 lh32 fwb">{{item.expect_salary.name}}/月
								| {{item.job_type_text}}</view>
						</view>
					</view>
				</view>
				<view class="box1 mt20">
					<view class="m-list-flex detail_tit">
						<image src="https://admin.mosizp.cn/static/public/detail_logo.png" mode="aspectFit"></image>
						<view class="">基本信息</view>
					</view>
					<view class="detail_content">
						<view class="lh60 fs26 col3"><text class="detail_name">联系电话:</text>{{resume.personal.mobile}}
						</view>
						<view class="lh60 mt10 fs26 col3"><text
								class="detail_name">邮箱地址:</text>{{resume.personal.email}}
						</view>
						<view class="lh60 mt10 fs26 col3"><text
								class="detail_name">户籍:</text>{{resume.personal.hukou_city || ''}}</view>
						<view class="lh60 mt10 fs26 col3"><text
								class="detail_name">目前状态:</text>{{resume.personal.current_state.name || ''}}</view>
					</view>
				</view>
				<view class="box1 mt20" v-if="resumeFiles.length>0">
					<view class="flex-box detail_tit">
						<image src="https://admin.mosizp.cn/static/public/detail_logo.png" mode="aspectFit"></image>
						<view class="">简历附件</view>
					</view>
					<view class="ptb30 plr20">
						<view class="flex-box flex-wrap" v-if="isApply">
							<view class="upload" v-for="(item,index) in resumeFiles">
								<image v-if="item.file_ext == 'doc' || item.file_ext == 'docx'" class="img1"
									@click="bindViewFile(index)" src="https://admin.mosizp.cn/static/public/z_fie.jpg" mode="aspectFill" />
								<image v-else-if="item.file_ext == 'pdf'" class="img1" @click="bindViewFile(index)"
									src="https://admin.mosizp.cn/static/public/z_fie.jpg" mode="aspectFill" />
								<image v-else class="img1" @click="bindViewImages(index)" :src="item.file"
									mode="aspectFill" />
							</view>
						</view>
						<view v-else>用户投递后可以查看</view>
					</view>
				</view>
				<view class="box1 mt20" v-if="resume.works.length>0">
					<view class="m-list-flex detail_tit">
						<image src="https://admin.mosizp.cn/static/public/detail_logo.png" mode="aspectFit"></image>
						<view class="">工作经历</view>
					</view>
					<view class="detail_content">
						<view class="teach_con">
							<view class="fs28 teach_item" v-for="(item,index) in resume.works">
								<view class="flex-box">
									<view class="flex-grow-1">
										<view class="col9">
											{{strReplace('-','/',item.start)}}-{{strReplace('-','/',item.end)}}
										</view>
										<view class="col3 ptb10">{{item.company_name}}</view>
										<view class="fs24 col9">{{item.job_title}}</view>
										<view class="fs24 col9"><text>{{item.detail}}</text></view>
									</view>


								</view>
								<view class="cir_tip">
									<image :src="iconPath('dot.png')" mode="widthFix"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="box1 mt20" v-if="resume.educations.length>0">
					<view class="flex-box detail_tit">
						<image src="https://admin.mosizp.cn/static/public/detail_logo.png" mode="aspectFit"></image>
						<view class="">教育经历</view>
					</view>

					<view class="detail_content">
						<view class="teach_con">
							<view class="fs28 teach_item" v-for="(item,index) in resume.educations">
								<view class="flex-box">
									<view class="flex-grow-1">
										<view class="col9">
											{{strReplace('-','/',item.start)}}-{{strReplace('-','/',item.end)}}
										</view>
										<view class="col3 ptb10">{{item.school_name}}</view>
										<view class="fs24 col9">{{item.level.name || ''}} | {{item.major}}</view>
									</view>
								</view>
								<view class="cir_tip">
									<image :src="iconPath('dot.png')" mode="widthFix"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="box1 mt20" v-if="resume.personal_tags.length>0">
					<view class="flex-box detail_tit">
						<image src="https://admin.mosizp.cn/static/public/detail_logo.png" mode="aspectFit"></image>
						<view class="">个人标签</view>
					</view>
					<view class="detail_content" style="padding-top: 0;">
						<view class="pt10">
							<view class="skill_btn m-ellipsis" v-for="(item,index) in resume.personal_tags">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
				<view class="box1 mt20" v-if="resume.skills.length>0">
					<view class="flex-box detail_tit">
						<image src="https://admin.mosizp.cn/static/public/detail_logo.png" mode="aspectFit"></image>
						<view class="">技能证书</view>
					</view>

					<view class="detail_content">
						<view class="teach_con skill_con">
							<view class="fs28 teach_item" v-for="(item,index) in resume.skills">
								<view class="col3 ptb10">{{item.skill_name}} - {{item.level.name}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="box1 mt20" v-if="resume.awards">
					<view class="flex-box detail_tit">
						<image src="https://admin.mosizp.cn/static/public/detail_logo.png" mode="aspectFit"></image>
						<view class="">荣誉奖项</view>
					</view>

					<view class="detail_content" v-if="resume.awards.length>0">
						<view class="upload_item" v-for="(item,index) in resume.awards">
							<image :src="cdnurl(item.image)" mode="aspectFill" class="upload_img"></image>

						</view>
					</view>
				</view>
				<view class="box1 mt20">
					<view class="flex-box detail_tit">
						<image src="https://admin.mosizp.cn/static/public/detail_logo.png" mode="aspectFit"></image>
						<view class="">自我评价</view>
					</view>

					<view class="detail_content fs28 col3 lh40"><text>{{resume.summary.content}}</text></view>
				</view>
			</view>
		</view>
		<view class="zz" v-if="showActionTip" @click="actionTip"></view>
		<view class="tip_tc" v-if="showActionTip">
			<view class="tip_p">
				<view>{{actionTipMsg||'补贴您今日免费体验10次面试邀约权限已耗尽，请联系客服升级权限或明日继续使用！'+contact_phone }}</view>
			</view>
			<view class="m-list-flex tip_btn">
				<view class="m-cell-bd" @click="actionTipTwo(contact_phone)">拨打电话</view>
				<button open-type="contact" @click="actionTip" class="m-cell-bd col2">联系客服</button>
			</view>
		</view>

		<view class="zz" v-if="showShareTip" @click="shareTip"></view>
		<view class="tip_tc" v-if="showShareTip">
			<view class="tip_p">
				<view>请选择分享方式</view>
			</view>
			<view class="m-list-flex tip_btn">
				<view class="m-cell-bd" @click="share">分享海报</view>
				<button open-type="share" @click="shareTip" class="m-cell-bd col2">分享小程序</button>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {

				resumeId: 0,
				resume: {
					personal: {
						avatar: '',
						realname: '',
						mobile: '',
						email: '',
						gender_text: '',
						age: '',
						web: '',
						current_address: '',
						education_level: {
							name: ''
						},
						work_experience: {
							name: ''
						},
						current_state: {
							name: ''
						}
					},
					personal_tags: [],
					works: [],
					educations: [],
					skills: [],
					awards: [],
				},
				isApply: false,
				isFav: 0,
				isInterviewing: 0,
				hasActionLog: 0,
				actionNum: 0,
				resumeFiles: [],
				showActionTip: false,
				contact_phone: '',
				showShareTip: false
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		onLoad: function(options) {
			let page = this;
			if (options.scene) {
				let scene = decodeURIComponent(options.scene);
				let query = scene.split('&');
				options.id = query[0].split('=')[1];
			}
			this.resumeId = options.id;
			this.getResumeDetail();
			this.$core.get({
				url: '/xilujob.resume/resume_files_prev',
				data: {
					resume_id: options.id
				},
				success(ret, response) {
					page.resumeFiles = ret.data
				}
			})
			uni.$on(app.globalData.Events.UserLogin, this.eventOnUserLogin, this);
		},
		onUnload() {
			uni.$off(app.globalData.Events.UserLogin, this.eventOnUserLogin, this);
		},
		onShareAppMessage() {
			let title = this.resume.personal.realname;
			return {
				title: title,
				//path: '/pages/talent_info_detail/talent_info_detail?id='+this.data.resumeId,
			};
		},
		onShareTimeline() {
			let title = this.resume.personal.realname;
			return {
				title: title,
				//path: '/pages/talent_info_detail/talent_info_detail?id='+this.data.resumeId,
			};
		},
		methods: {
			getResumeDetail() {
				this.$core.get({
					url: '/xilujob.resume/resume_detail',
					data: {
						id: this.resumeId
					},
					success: ret => {
						let resume = ret.data.resume;
						this.resume = resume;
						this.isFav = ret.data.is_fav;
						this.isInterviewing = ret.data.is_interviewing;
						this.hasActionLog = ret.data.has_action_log;
						this.actionNum = ret.data.action_num;
						this.isApply=ret.data.is_apply==1?true:false
					},
					fail: ret => {
						uni.showModal({
							title: '提示',
							content: ret.msg,
							showCancel: false,
							success() {
								uni.navigateBack();
							}
						})
						return false;
					}
				});
			},
			// 收藏
			bindToggleFav() {
				if (!this.$core.getUserinfo(true)) {
					return;
				}
				if (this.$core.getUserinfo().group_id == 1) {
					uni.showToast({
						title: '请切换到公司身份',
						icon: 'none'
					});
					return;
				}
				let page = this;
				page.isFav = !this.isFav;
				this.$core.post({
					url: '/xilujob.resume/toggle_fav',
					loading: false,
					data: {
						id: this.resumeId
					},
					success: (ret) => {
						page.isFav = ret.data.is_fav;
						if (this.isFav) {
							uni.$emit(app.globalData.Events.ResumeFavAdd, {
								resume: this.resume
							});
						} else {
							uni.$emit(app.globalData.Events.ResumeFavRemove, {
								resume: this.resume
							});
						}
					},
					fail: ret => {
						uni.showToast({
							title: '收藏失败',
							icon: 'none'
						});
						page.isFav = !page.isFav;
						return false;
					}
				});
			},
			bindMakeCall() {
				let resume = this.resume;
				if (!resume.personal.mobile) {
					uni.showToast({
						title: '对方未填写电话号码',
						icon: 'none'
					});
					return;
				}
				let userinfo = this.$core.getUserinfo();
				if (userinfo.group_model.audit_status != 1) {
					uni.showToast({
						title: '请完善企业认证',
						icon: 'none'
					})
					return false;
				}
				if (resume.personal.mobile.indexOf('*') !== -1) {
					this.$core.post({
						url: 'xilujob.resume/get_contact',
						data: {
							resume_id: resume.id,
							user_id: resume.user_id
						},
						success: ret => {
							this.resume.personal.mobile = ret.data.mobile;
							this.resume.personal.email = ret.data.email;
							uni.makePhoneCall({
								phoneNumber: ret.data.mobile //仅为示例，并非真实的电话号码
							});
						},
					fail: ret => {
						const errorMsg = ret.msg || '获取联系方式失败';
						uni.showModal({
							title: "提示",
							content: errorMsg,
							showCancel: false,
							success(res) {
								if (res.confirm) {
									// 检查错误信息是否包含套餐相关提示，点击确定跳转到套餐页面
									if (errorMsg.includes('套餐') || errorMsg.includes('查看简历数已用尽') || errorMsg.includes('请前往购买')) {
										console.log('跳转到套餐页面');
										uni.navigateTo({
											url: '/pages/company/taocan'
										});
									}
								}
							}
						})
						return false;
					}
					});
					return;
				}
				uni.makePhoneCall({
					phoneNumber: resume.personal.mobile
				});
			},
			//沟通
			contact() {
				if (!this.$core.getUserinfo(true)) {
					return;
				}
				let userinfo = this.$core.getUserinfo();
				if (userinfo.group_model.audit_status != 1) {
					uni.showToast({
						title: '请完善企业认证',
						icon: 'none'
					})
					return false;
				}
				if (this.resume.user_id == userinfo.id) {
					uni.showToast({
						title: '不可与自己沟通',
						icon: 'none'
					})
					return false;
				}
				let chatParams = {
					receive_user_id: this.resume.user_id,
					resume_id: this.resume.id,
					content: this.resume.id,
					to_username: this.resume.user ? this.resume.user.nickname : '',
					chat_type: 5, //人才沟通
				}
				uni.navigateTo({
					url: '/pages/public/chat?param=' + JSON.stringify(chatParams),
					// success(res) {
					//   res.eventChannel.emit('chatTransfor', chatParams)
					// }
				})
			},
			bindCreateInterview() {
				if (!this.$core.getUserinfo(true)) {
					return;
				}
				let userinfo = this.$core.getUserinfo();
				if (userinfo.group_model.audit_status != 1) {
					uni.showToast({
						title: '请完善企业认证',
						icon: 'none'
					})
					return false;
				}
				if (userinfo.group_id != 2) {
					uni.showToast({
						title: '请切换到公司身份',
						icon: 'none'
					});
					return;
				}
				if (this.isInterviewing) {
					return;
				}
				let resume = this.resume;
				this.$core.post({
					url: 'xilujob.resume/get_interview',
					data: {
						resume_id: resume.id,
						user_id: resume.user_id
					},
					success: ret => {
						uni.navigateTo({
							url: '/pages/company/invite_interview',
							events: {
								dataTransfer: data => {
									this.isInterviewing = true;
								}
							},
							success: res => {
								res.eventChannel.emit('dataTransfer', {
									resume: this.resume
								});
							}
						});
					},
					fail: ret => {
						const errorMsg = ret.msg || '获取联系方式失败';
						uni.showModal({
							title: "提示",
							content: errorMsg,
							showCancel: false,
							success(res) {
								if (res.confirm) {
									// 检查错误信息是否包含套餐相关提示，点击确定跳转到套餐页面
									if (errorMsg.includes('套餐') || errorMsg.includes('查看简历数已用尽') || errorMsg.includes('请前往购买')) {
										console.log('跳转到套餐页面');
										uni.navigateTo({
											url: '/pages/company/taocan'
										});
									}
								}
							}
						})
						return false;
					}
				});

			},

			eventOnUserLogin(userinfo) {
				this.getResumeDetail();
			},
			bindViewImages(index) {

				uni.previewImage({
					urls: [this.resumeFiles[index].file],
					current: this.resumeFiles[index].file
				})
			},

			bindViewFile(index) {
				let url = this.resumeFiles[index].file;
				uni.downloadFile({
					// 示例 url，并非真实存在
					url: url,
					success: function(res) {
						const filePath = res.tempFilePath
						uni.openDocument({
							filePath: filePath,
							success: function(res) {
								console.log('打开文档成功')
							}
						})
					}
				})
			},
			share() {
				this.shareTip();
				this.$core.get({
					url: 'xilujob.resume/poster_info/id/' + this.resumeId,
					success: ret => {
						this.$core.setCache('temp', ret.data, 10);
						uni.navigateTo({
							url: '/pages/public/share_post2'
						})
					}
				});
			},
			shareTip() {
				this.showShareTip = !this.showShareTip
			},

			pathImg(e) {
				this.postUrl = e
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		height: 408rpx;
		width: 100%;
		background: var(--primary);
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}

	.user_img {
		width: 149rpx;
		height: 149rpx;
		border: 3rpx solid #FFFFFF;
		border-radius: 50%;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	.label {
		display: inline-block;
		vertical-align: top;
		margin-top: 10rpx;
		margin-right: 10rpx;
		border: 1px solid #FFFFFF;
		opacity: 0.6;
		border-radius: 4rpx;
		height: 36rpx;
		line-height: calc(36rpx - 2px);
		font-size: 22rpx;
		color: #FFFFFF;
		padding: 0 8rpx;
	}

	.tal_info {
		width: 690rpx;
		min-height: 156rpx;
		background: #FFFFFF;
		position: relative;
		margin-top: 35rpx;
		padding-bottom: 30rpx;
		border-radius: 20rpx;
		background-color: #fff;
		box-shadow: 0px 1rpx 18rpx 0px rgba(0, 0, 0, 0.06);

		.tip_img {
			position: absolute;
			top: 0px;
			right: 0px;
			width: 106rpx;
			height: 100rpx;
			border-radius: 0 18rpx 0 0;
		}

		.view {
			width: 690rpx;
			padding: 30rpx 30rpx 0;
			position: relative;
			z-index: 2;
		}
	}

	.box1 {
		box-shadow: 0px 2rpx 36rpx 0px rgba(0, 0, 0, 0.06);
		border-radius: 8rpx;
		border: 1rpx solid #ebebeb;
		padding: 0;
	}

	.teach_item {
		padding-left: 40rpx;
		padding-bottom: 40rpx;
		position: relative;

		&:last-child {
			padding-bottom: 0;
		}
	}

	.cir_tip image {
		width: 22rpx;
		height: 22rpx;
		display: block
	}

	.cir_tip {
		position: absolute;
		top: 10rpx;
		left: 0
	}

	.teach_item::before {
		content: '';
		position: absolute;
		left: 12rpx;
		top: 32rpx;
		bottom: -10rpx;
		background-color: #E1E1E1;
		width: 1rpx;
		display: block
	}

	.teach_item:nth-last-child(1)::before {
		display: none
	}

	.add_btn {
		border: 2rpx solid var(var(--primary));
		font-size: 26rpx;
		color: var(var(--primary));
		line-height: 70rpx;
		border-radius: 8rpx;
		display: inline-block;
		padding: 0 42rpx;
		background: none;
		position: static;
		width: auto;
		height: auto;
		box-shadow: none
	}

	.skill_btn {
		width: 190rpx;
		height: 72rpx;
		line-height: 72rpx;
		background: #F5F5F5;
		border-radius: 8rpx;
		display: inline-block;
		vertical-align: top;
		font-size: 27rpx;
		color: #666666;
		margin-top: 20rpx;
		margin-right: 30rpx;
		text-align: center;

		&:nth-of-type(3n) {
			margin-right: 0;
		}
	}

	.upload_item {
		margin-top: 30rpx;
		margin-right: 30rpx;
		width: 190rpx;
		height: 190rpx;
		display: inline-block;
		vertical-align: top;
		position: relative;
		border-radius: 12rpx;

		&:nth-of-type(3n) {
			margin-right: 0;
		}

		.upload_img {
			width: 100%;
			height: 100%;
			display: block;
			border-radius: 12rpx;
		}

		.upload_del {
			width: 45rpx;
			height: 45rpx;
			position: absolute;
			top: 12rpx;
			right: 12rpx;
			z-index: 2;
		}
	}

	.footer_img1 {
		width: unset;
	}

	.footer_img1 .text {

		font-size: 20rpx;
		color: #555555;
		line-height: 24rpx;
		text-align: center;
		width: 80rpx;
	}

	.footer_img1 image {
		width: 36rpx;
		height: 36rpx;
		display: block;
		margin: 0 auto 10rpx
	}

	.footer_img1.u1 image {
		width: 36rpx;
		height: 36rpx;
		display: block;
		margin: 0 auto 10rpx
	}

	.bt1 {
		width: 220rpx;
		height: 74rpx;
		line-height: 74rpx;
		text-align: center;
		background: rgba(117, 117, 117, .1);
		border-radius: 8rpx;
		font-size: 28rpx;
		color: #999999;
	}

	.bt2 {
		width: 220rpx;
		height: 74rpx;
		line-height: 74rpx;
		text-align: center;
		font-size: 28rpx;
		color: #FFFFFF;
		background: var(--primary);
		border-radius: 8rpx;
	}

	.detail_name {
		width: 110rpx;
		text-align-last: justify;
		font-size: 24rpx;
		color: #666;
		margin-right: 20rpx;
	}

	.detail_tit {
		border-bottom: 1rpx solid #ebebeb;
		padding: 30rpx;
	}

	.detail_tit view {
		font-size: 28rpx;
		color: #000000
	}

	.detail_tit image {
		width: 25rpx;
		height: 25rpx;
		margin-right: 13rpx;
	}

	.upload {
		position: relative;
		margin: 0 14rpx 14rpx 0;
		width: 150rpx;
		height: 150rpx;
		border-radius: 10rpx;
	}

	.upload:nth-of-type(4n) {
		margin: 0 0 14rpx;
	}

	.upload .img1 {
		display: block;
		width: 150rpx;
		height: 150rpx;
		border-radius: 10rpx;
	}

	.upload .icon_close {
		position: absolute;
		right: -16rpx;
		top: -16rpx;
		display: block;
		width: 35rpx;
		height: 35rpx;
		border-radius: 50%;
	}

	.detail_content {
		padding: 30rpx;
	}

	/* 专业技能 */
	.skill_con .take_btn {
		padding-top: 30rpx;
		padding-bottom: 30rpx;
	}

	/* .skill_con>view{border-bottom: 2rpx solid #ddd} */
	.skill_con>view {
		padding-left: 0;
		padding-bottom: 0;
	}

	.skill_con>view::before {
		display: none
	}

	/* .skill_con>view:nth-last-child(1){margin-bottom: 30rpx} */
	.skill_con text {
		display: block;
		width: 100%;
		font-size: 28rpx;
		color: #333
	}

	/* 弹窗 */
	.tip_tc {
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 20;
		background-color: #fff;
		font-size: 30rpx;
		color: #000;
		text-align: center;
		width: 520rpx;
		border-radius: 20rpx;
		overflow: hidden
	}

	.tip_tc image {
		width: 81rpx;
		height: 81rpx;
		display: block;
		margin: 0 auto
	}

	.zz {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.6);
		text-align: center
	}

	.tip_p {
		padding: 52rpx 53rpx;
	}

	.tip_tc button {
		height: 90rpx;
		line-height: 90rpx;
		font-size: 34rpx;
	}

	.tip_btn {
		line-height: 90rpx;
		border-top: 1rpx solid #E1E1E1
	}

	.tip_btn view:nth-child(2) {
		border-left: 1rpx solid #E1E1E1
	}

	.jl_btn {
		position: absolute;
		top: 25rpx;
		right: 0;
		border-radius: 53rpx 0 0 53rpx;
		line-height: 53rpx;
		padding: 0 23rpx;
		font-size: 24rpx;
		color: #fff;
		background-color: var(--primary);
	}

	.jl_btn image {
		width: 20rpx;
		height: 20rpx;
		margin-right: 11rpx;
		display: block
	}
</style>